<template>
    <div>
        <div class="crumbs" style="display:inline ;float: left">
            <el-breadcrumb separator="/" >
                <el-breadcrumb-item><i class="el-icon-message"></i> 用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-table
            v-loading="loading"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                label="用户名"
                width="130">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.username}}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                label="用户状态"
                width="120">
                <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary" plain
                                @click="changeUserStatus(scope.$index, scope.row)">{{ scope.row.hasFreeze }}</el-button>
                </template>

            </el-table-column>
            <el-table-column
                label="权限"
                width="150">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.role }}
                        </div>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                label="api-key"
                width="250">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.apiKey }}
                        </div>
                    </el-popover>
                </template>

            </el-table-column>

            <el-table-column
                label="websocketSessionId"
                width="150">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.websocketSessionId }}
                        </div>
                    </el-popover>
                </template>

            </el-table-column>
            <el-table-column
                label="email"
                width="150">
                <template slot-scope="scope">
                    <el-popover >
                        <div slot="reference" class="name-wrapper">
                            {{ scope.row.email }}
                        </div>
                    </el-popover>
                </template>

            </el-table-column>

            <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button type="danger" icon="el-icon-delete" plain  @click="table_delete(scope.$index, scope.row)">删除</el-button>

                    </el-button-group>
                </template>
            </el-table-column>

        </el-table>

        <!--分页效果-->
        <div class="fenYe">
            <div class="block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="5"
                    layout="prev, pager, next, jumper"
                    :total="listTotal">
                </el-pagination>
            </div>
        </div>


    </div>
</template>

<script>
    export default {
        name: "user_admin",
        data() {
            return {
                tableData:[],
                loading:true,
                listTotal:0,
                currentPage:1,
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.getUserListWithPage(val);
            },
            //删除用户
            table_delete(index,row) {
                this.$confirm('确认删除？')
                    .then(_ => {

                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/admin/deleteUser?userId="+row.id;
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success(res.data.msg);
                        this.getUserListWithPage(this.currentPage);

                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(reason => {
                    console.log(reason);
                    this.$message.error("删除用户时出现异常");
                })
                    })
                    .catch(_ => {});
            },
            //获取用户列表，分页
            getUserListWithPage(val) {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/getAllUserList?pageIndex="+val;
                this.$axios.get(url,config)
                    .then(res=>{
                        if (res.data.code === 1) {
                            console.log(res.data.data);
                            this.tableData = res.data.data;
                            for (var i=0; i<this.tableData.length; i++){
                                // this.tableData[i].ip = store.state.service_address;
                                if (this.tableData[i].hasFreeze===0) {
                                    this.tableData[i].hasFreeze="正常"
                                }
                                if (this.tableData[i].hasFreeze===1) {
                                    this.tableData[i].hasFreeze="冻结"
                                }
                            }
                            this.loading=false;
                            this.currentPage=val;
                        }

                    })
                    .catch(function (err) {
                        console.log(err);
                    })

            },
            //获取用户总数
            getUserListWithPageTotal() {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/getAllUserListTotal";
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success("成功获取用户总数");
                        this.listTotal=res.data.data;

                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(reason => {
                    console.log(reason);
                    this.$message.error("获取用户总数出现异常");
                })
            },
            //改变用户的状态
            changeUserStatus(index,row) {
                var token='Bearer '+sessionStorage.getItem("Token");
                let config = {
                    headers: {
                        'Authorization':token,
                    }
                };
                var url = "/api/user/admin/changeUserStatus?userId="+row.id+"&&hasFreeze="+row.hasFreeze;
                this.$axios.get(url,config).then(res=>{
                    console.log(res);
                    if(res.data.code===1) {
                        this.$message.success(res.data.msg);
                        this.getUserListWithPage(this.currentPage);

                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(reason => {
                    console.log(reason);
                    this.$message.error("切换用户状态时出现异常");
                })
            },
        },
        created() {
            this.getUserListWithPageTotal();
            this.getUserListWithPage(this.currentPage);
        },
    }
</script>

<style scoped>

</style>
